<template>
  <div class="content-sub">
    <div class="sub3-left">
      <div class="sub3-data">
        <div class="sub3-data-box" v-for="item in deviceCount" :key="item.index">
          <div class="sub2-data-p">
            <div><p>{{item.name}}</p><p>{{item.time}}</p></div>
            <div class="sub2-data-num">{{item.onCount}}/{{item.allCount}}<span></span></div>
            <div>开启率 {{(item.onCount/item.allCount).toFixed(2)}}%</div>
          </div>
        </div>
      </div>
      <div class="sub3-table">
        <h4><span>昨日空调使用情况</span></h4>
        <table class="desk-table">
          <thead>
            <tr>
              <th>办公室名</th>
              <th>工作时段</th>
              <th>开启时长-小时</th>
            </tr>
          </thead>
        </table>
        <div class="desk-table2">
          <table class="desk-table">
            <tbody>
              <tr v-for="item in acUsetime" :key="item.index">
                <td>{{ item.name.substring(8) }}</td>
                <td>{{ item.worktime }}</td>
                <td>{{ item.usetime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="sub3-right">
      <div class="sub3-right-part1">
        <div class="sub3-right-part1-box1">
            <div class="sub1-chart sub3-list">
              <div class="sub3-list-title">
                <div></div>
                <div>温度</div>
                <div>湿度</div>
              </div>
              <div class="sub3-list-row" v-for="item in roomEnvironment" :key="item.name">
                <div>{{ item.name }}</div>
                <div class="sub3-list-data">
                  <div class="sub-list-num" v-for="t in item.temperature==='Nan'?'--':item.temperature" :key="t.name"><span>{{t}}</span></div>
                  <div class="sub-list-unit"><span>℃</span></div>
                </div>
                <div class="sub3-list-data">
                  <div class="sub-list-num" v-for="h in item.humidity==='Nan'?'--':item.humidity" :key="h.name"><span>{{h}}</span></div>
                  <div class="sub-list-unit"><span>%</span></div>
                </div>
              </div>
            </div>
        </div>
        <div class="sub-box1">
          <div class="sub1-chart">
            <p class="chart-title"><span>实时设备开启情况</span></p>
            <chart :options="chart1" :theme="chartTheme"></chart>  
          </div>
        </div>
      </div>
      <div class="sub3-right-part2">
        <div class="sub1-chart">
          <p class="chart-title"><span>设备使用情况趋势</span></p>
          <div class="sub1-box-chart">
            <chart :options="chart2" :theme="chartTheme"></chart>
          </div>
        </div>
      </div>
      <div class="sub3-right-part2">
        <div class="sub1-chart">
            <p class="chart-title"><span>设备使用时长趋势（小时）</span></p>
            <div class="sub1-box-chart">
              <chart :options="chart3" :theme="chartTheme"></chart>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'hospitalC',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#048eff','#00e7d0','#3f38ff','#8e3fff','#dd00c5'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data: ['照明','空调','插座'],
          orient: 'vertical',
          left: 40,
          top: 'center'
        },

        series : [
          {
            name:'开启量',
            type:'pie',
            radius : '55%',
            center: ['60%', '50%'],
            data:[
              {value:435, name:'照明'},
              {value:310, name:'插座'},
              {value:274, name:'空调'},
            
            ].sort(function (a, b) { return a.value - b.value; }),
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#414474'
                },
                length: 10,
                length2: 20
              }
            }
          }
        ]
      },
      chart2: {
        color: ['#dd00c4','#8e3fff'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
            data:['照明','空调','插座','风扇','室内温度','设定温度'],
            top: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07', '12.08', '12.09', '12.10'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
          },
          {
            type : 'value',
            neme : '温度',
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: '{value} °C'
            },
          }

        ],
        series : [
          {
            name:'空调',
            type:'bar',
            barWidth: '20%',
            data:[25, 52, 200, 334, 390, 330, 220, 140, 152, 89],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#00d7f4'},
                  {offset: 0.5, color: '#00d7f4'},
                  {offset: 1, color: 'rgba(0, 232, 207, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'风扇',
            type:'bar',
            barWidth: '20%',
            data:[10, 37, 170, 144, 290, 230, 175, 111, 126, 70],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#34ffb0'},
                  {offset: 0.5, color: '#34ffb0'},
                  {offset: 1, color: 'rgba(52, 255, 176, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'照明',
            type:'bar',
            barWidth: '20%',
            data:[20, 50, 179, 270, 330, 200, 188, 70, 146, 67],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#a3ff51'},
                  {offset: 0.5, color: '#a3ff51'},
                  {offset: 1, color: 'rgba(163, 255, 81, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'插座',
            type:'bar',
            barWidth: '20%',
            data:[20, 50, 179, 270, 330, 200, 188, 70, 146, 67],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#3489ff'},
                  {offset: 0.5, color: '#3489ff'},
                  {offset: 1, color: 'rgba(52, 137, 255, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'室内温度',
            type:'line',
            yAxisIndex: 1,
            symbol: 'circle',
            data:[22.0, 22.2, 23.3, 24.5, 26.3, 20.2, 20.3, 23.4, 23.0, 26.5],
          },
          {
            name:'设定温度',
            type:'line',
            yAxisIndex: 1,
            symbol: 'circle',
            data:[20, 23, 25, 24, 24, 22, 23, 23, 22, 20],
          }
        ]
      },
      chart3: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
            data:['空调', '风扇', '照明', '插座'],
            top: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'空调',
            type:'bar',
            barWidth: 20,
            data:[25, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#00d7f4'},
                  {offset: 0.5, color: '#00d7f4'},
                  {offset: 1, color: 'rgba(0, 232, 207, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'风扇',
            type:'bar',
            barWidth: 20,
            data:[10, 37, 170, 144, 290, 230, 175],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#34ffb0'},
                  {offset: 0.5, color: '#34ffb0'},
                  {offset: 1, color: 'rgba(52, 255, 176, .1)'}
                ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'照明',
            type:'bar',
            barWidth: 20,
            data:[20, 50, 179, 270, 330, 200, 188],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                    {offset: 0, color: '#a3ff51'},
                    {offset: 0.5, color: '#a3ff51'},
                    {offset: 1, color: 'rgba(163, 255, 81, .1)'}
                  ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          },
          {
            name:'插座',
            type:'bar',
            barWidth: 20,
            data:[20, 50, 179, 270, 330, 200, 188],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                    {offset: 0, color: '#3f38ff'},
                    {offset: 0.5, color: '#3f38ff'},
                    {offset: 1, color: 'rgba(63, 56, 255, .1)'}
                  ]),
                barBorderRadius: [20,20,0,0],
              }
            }
          }
        ]
      },
      deviceCount: [],
      acUsetime: [],
      roomEnvironment: [],
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })
    this.getData()
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/device/data')
      .then( (response) => {
        if (response.status===200) {
          let _data = response.data.body
          console.log(_data)
          this.deviceCount = _data.device_count
          this.acUsetime = _data.ac_usetime
          this.roomEnvironment = _data.room_environment
          
          
          this.chart1.series[0].data = _data.device_count_pie.series

          if (_data.deviceinfo_trend.series&&_data.deviceinfo_trend.series.length!==0) {
            this.chart2.xAxis[0].data = _data.deviceinfo_trend.xAxis
            this.chart2.series[0].data = _data.deviceinfo_trend.series[0]['空调开启量']
            this.chart2.series[1].data = _data.deviceinfo_trend.series[1]['风扇开启量']
            this.chart2.series[2].data = _data.deviceinfo_trend.series[3]['照明开启量']
            this.chart2.series[3].data = _data.deviceinfo_trend.series[5]['插座开启量']
            this.chart2.series[4].data = _data.deviceinfo_trend.series[2]['室内温度']
            this.chart2.series[5].data = _data.deviceinfo_trend.series[4]['空调设定温度'] 
          }


          this.chart3.xAxis[0].data = _data.usetime_week.xAxis 
          this.chart3.series[0].data = _data.usetime_week.series[0]['空调']
          this.chart3.series[1].data = _data.usetime_week.series[1]['风扇']
          this.chart3.series[2].data = _data.usetime_week.series[2]['照明']
          this.chart3.series[3].data = _data.usetime_week.series[3]['插座']
          
        }
      })
    }
  }
}
</script>

<style scoped>
  @import '../../../style/hospital.css';
  .echarts {
    height: 250px;
    width: 100%;
  }
</style>